<template>
  <div class="children">
    <el-divider>基本信息</el-divider>
    <el-descriptions direction="vertical" :column="4" border size="medium">
      <el-descriptions-item label="申请单号">{{ ObjData.upkeepPlanNum || '-' }}</el-descriptions-item>
      <el-descriptions-item label="标题">{{ ObjData.title || '-' }}</el-descriptions-item>
      <el-descriptions-item label="保养人">
        <span v-for="(v, i) in ObjData.upkeepPlanMaintainerList" :key="i">
          {{ v.maintainerName || '-' }}
          <template v-if="i !== ObjData.upkeepPlanMaintainerList.length - 1">
            ,
          </template>
        </span>
        <!-- {{ ObjData.headName || '-' }} -->
      </el-descriptions-item>
      <el-descriptions-item label="保养部门">{{ ObjData.deptName || '-' }}</el-descriptions-item>

      <el-descriptions-item label="循环类型">{{ ['循环保养', '单次保养'][ObjData.cycleType] || '-' }}</el-descriptions-item>
      <el-descriptions-item label="生成任务">{{ ['提前一日', '提前二日', '提前三日', '提前四日', '提前五日'][ObjData.generateTaskType] || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="验收人">{{ ObjData.acceptorName || '-' }}</el-descriptions-item>

      <el-descriptions-item label="验收人部门">{{ ObjData.acceptanceDeptName || '-' }}</el-descriptions-item>
      <el-descriptions-item label="验收方式">{{ ObjData.acceptanceModeName || '-' }}</el-descriptions-item>
      <el-descriptions-item label="备注" :span="3">{{ ObjData.remark || '-' }}</el-descriptions-item>
    </el-descriptions>
    <el-divider>保养设备</el-divider>
    <el-table v-loading="loading" :data="noticeList">
      <el-table-column label="序号" align="center" prop="order" width="50" />
      <el-table-column label="设备编号" align="center" min-width="130">
        <template slot-scope="scope">
          {{ scope.row.equipmentNum || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="设备名称" align="center" min-width="130">
        <template slot-scope="scope">
          {{ scope.row.equipmentName || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="品牌" align="center" min-width="130">
        <template slot-scope="scope">
          {{ scope.row.brand || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="规格型号" align="center" min-width="130" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.model || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="供应商" align="center" min-width="150" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.supplierName || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="单位" align="center" min-width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.unitName || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" min-width="180" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.remark || '-' }}
        </template>
      </el-table-column>
      <el-table-column :label="ObjData.cycleType === '0' ? `循环起算日` : `指定保养日期`" align="center" min-width="220">
        <template slot-scope="scope">
          {{ scope.row.specifyTime || '-' }}
          <!-- <el-date-picker v-model="scope.row.specifyTime" type="date" style="width:217px" value-format="yyyy-MM-dd"
            placeholder="请选择指定日期" /> -->
        </template>
      </el-table-column>
      <el-table-column label="保养标准" min-width="180" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button size="small" type="primary" icon="el-icon-view" @click="handleSelect(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="card-div">
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
    <!-- 查看保养项目 -->
    <template v-if="openObject">
      <SelectStandard :row="rowObject"></SelectStandard>
    </template>
  </div>
</template>

<script>
import { getSelectChildrenPlan, getSelectChildrenPlanEquipment } from "@/api/maintenance/insurance/insurance.js";
export default {
  props: ['upkeepPlanId'],
  components: {
    SelectStandard: () => import('./SelectStandard.vue')
  },
  data () {
    return {
      ObjData: {},
      openObject: false,
      rowObject: {},
      // 总条数
      total: 0,
      loading: false,
      noticeList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderByColumn: 'equipmentAccountId',
        isAsc: 'desc'//倒叙
      },
    }
  },
  created () {
    this.getChildrenPlan()
    this.getList()
  },
  methods: {
    async getList () {
      let params = {
        ...this.queryParams,
        'params[scope1]': 1,
        'params[scope4]': 1,
        'params[upkeepPlanId]': this.upkeepPlanId //保养计划ID
      }
      this.loading = true
      let data = await getSelectChildrenPlanEquipment(params)
      this.noticeList = data && data.data.map((item, index) => {
        return {
          ...item,
          order: index + 1
        }
      })
      this.total = data.total
      this.loading = false
    },
    async getChildrenPlan () {
      let res = await getSelectChildrenPlan(this.upkeepPlanId)//保养计划ID
      this.ObjData = res.data
    },
    handleSelect (row) {
      this.rowObject = { ...row, upkeepPlanId: this.upkeepPlanId }
      this.openObject = true
    },
  }
}
</script>

<style lang="scss" scoped>
.children ::v-deep .el-descriptions--medium.is-bordered .el-descriptions-item__cell {
  text-align: center;
}
</style>